<template>
  <h1>Js之法</h1>
  <div id="box">
    <div id="sider">
      <ul>
        <li id="sider_title" v-for="(item, index) in titles">
          <div>
            <h3>{{ index + 1 }}、{{ item.title }}</h3>
            <textarea
              name="item.title"
              id="item.title"
              cols="30"
              rows="5"
              v-if="item.options !== undefined"
            ></textarea>
            <button @click="item.func">{{ item.apiName }}</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
interface Navdata {
  title: string
  options?: Object
  apiName: string
  func: Function
}
let titles: Array<Navdata> = reactive([
  {
    title: 'number',
    apiName: '0.1+0.2',
    func: () => {
      console.log('0.1+0.2=', 0.1 + 0.2)
    },
  },
])
</script>

<style scoped>
* {
  list-style: none;
  text-decoration: none;
}
#box {
  display: flex;
  flex-direction: row;
}
#sider_title {
  color: #111;
}
</style>
